<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>账户设置</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        h2 {
            text-align: center;
            margin-bottom: 30px;
        }

        .account-box {
            width: 900px;
            margin: 50px auto;
        }

        .account-box ul li {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #eaeaeb;
            padding-left: 15px;
            color: #666;
        }

        .account-box ul li span {
            margin-left: 10px;
        }

        .account-box ul li:last-child span {
            cursor: pointer;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="account-box">
        <h2>账户设置</h2>
        <ul>
            <li>用户名：<span v-text="user.userId"></span></li>
            <li>昵&nbsp;&nbsp;&nbsp;称：<span v-text="user.userName"></span></li>
            <li>余&nbsp;&nbsp;&nbsp;额：<span v-text="user.balance"></span></li>
            <li>会员过期时间：<span v-text="user.formatDate">1045125414@qq.com</span></li>


            <el-button type="primary" icon="el-icon-search" @click="toMember">充值会员</el-button>
            <el-button type="primary" icon="el-icon-search" @click="toRecord">查询消费记录</el-button>


            <el-button type="text" @click="dialogFormVisible = true">充值</el-button>

            <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
                <el-form>

                    <el-form-item label="余额" :label-width="formLabelWidth">
                        <el-input v-model="money" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addMoney">确 定</el-button>
                </div>
            </el-dialog>
        </ul>


    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                user: {},
                money:0,
                dialogFormVisible:false
            }
        },
        beforeCreate() {
            axios.get('/api/user/getUserInfo', {
                params: {
                    userId: 1
                }
            })
                .then(response => {
                    this.user = response.data.data;
                    console.log(this.user)
                })
                .catch(error => {
                    console.log(error);
                });
        },
        methods:{
            reload(){
                axios.get('/api/user/getUserInfo', {
                    params: {
                        userId: 1
                    }
                })
                    .then(response => {
                        this.user = response.data.data;
                        console.log(this.user)
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            toRecord(){
                window.location.href='http://127.0.0.1:8080/api/record/index';
            },
            toMember(){
                window.location.href='http://127.0.0.1:8080/api/member/index';
            },
            addMoney(){
                axios.get('/api/user/addMoney',{
                    params: {
                        userId: this.user.userId,
                        money: this.money
                    }
                }).then(res =>{
                    if(res.data.success){
                        alert("充值成功！")
                        this.dialogFormVisible=false
                        this.reload()
                    }else {
                        alert(res.data.data)
                    }
                })
            }
        }
    })
</script>
</body>
</html>
